<template>
	<Container>
		<view class="header">
			<view class="articles" v-for="(item, index) in assignment.articles" :key="index"><image :src="item.imageUrl" mode="aspectFit"></image></view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="questionWord" />
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import { guide } from '../../../common/mixins/assignmentGuide.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	mixins: [mixins, guide],
	components: { AudioIcon, Question, Container, Record }
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 5vh 0
	display flex
	position relative
	.articles
		height 100%
		width 50%
		display flex
		justify-content center
		align-items center
		image
			width 85%
			height 80%
</style>
